<template>
    <el-container class="g-height100 g-width100 g-padding0" style="background-color: #3c8dbc;">
        <el-aside width="200px" class="g-flex-center g-font-size-elg g-color-fff" style="background-color: #367fa9;">
            <i class="el-icon-grape"> grape</i>
        </el-aside>
        <el-main class="g-color-fff g-padding0">
            <el-row type="flex" class="g-height100" justify="space-between">
                <el-col class="g-height100 g-flex-align-cross-center">
                    <ApplicationSwitch  :applications="applications" :userinfo-loading="applicationsLoading"></ApplicationSwitch>
                </el-col>
                <el-col class="g-height100 g-flex-align-cross-center g-flex-align-end">
                    <!-- 右侧 头像和用户名 -->
                    <UserinfoDropdown class="item" :current-userinfo="currentUserinfo" :userinfo-loading="userinfoLoading"></UserinfoDropdown>
                </el-col>
            </el-row>

        </el-main>
    </el-container>
</template>

<script>
    import UserinfoDropdown from './UserinfoDropdown.vue'
    import ApplicationSwitch from './ApplicationSwitch.vue'

    export default {
        components: {
            UserinfoDropdown,
            ApplicationSwitch
        },
        data (){
            return {
                roleChangePopShow: false,
                postChangePopShow: false,
                applications:[],
                applicationsLoading:false,
                userinfoLoading: false,
                currentUserinfo:{}
            }
        },
        mounted(){
            this.getApplications()
            this.getUserinfo()
            // 在更新用户信息时触发
            this.$bus.$on('userinfoEdit',(data)=>{
                this.currentUserinfo = data
            })
            this.$bus.$on('refreshUserInfo',()=>{
                this.getUserinfo()
            })
        },
        methods:{
            getApplications(){
                this.applicationsLoading = true
                this.axios.get(this.$baseURL.base +  '/base/application/list/current/user').then(res => {
                    this.applications = res.data
                }).catch((error) => {
                    if(error.response){
                        this.$message.error(error.response.data.msg)
                    }else{

                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.applicationsLoading = false
                })
            },
            getUserinfo(){
                this.userinfoLoading = true
                this.axios.get(this.$baseURL.base +  '/base/user/userinfo/current').then(res => {
                    this.currentUserinfo = res.data
                }).catch((error) => {
                    if(error.response){
                        this.$message.error(error.response.data.msg)
                    }else{

                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.userinfoLoading = false
                })
            }
        }
    }
</script>

<style scoped>
.item{
    height: 100%;
}
.item:hover{
    background-color: #367fa9;
}
</style>